Drop-Down Menus

In CSS3, drop-down menus can be designed using properties like :hover and display.

An illustration of drop-down menus is here to try out:

===============================================================
Here is the code of the HTML and embedded CSS style sheets:
=========================================================== 
		<html> 

		<head> 

			<title> drop-down menus </title> 
	
			<style type="text/css"> 

				body {font-family: times, sans-serif;}
				nav	{color: LightGray; 
					border: 4px solid purple;
					width: 5em;
					font-size: 16pt;
					background-color: yellow;}
				nav ul	{display: none;
						list-style: none;}
				nav:hover ul	{display: block;}
				nav	ul li		{background-color: LightGray;
							width: 15em;
							color: skyblue;
							}
				nav ul li:hover	{background-color: green;
							}			
			</style> 

		</head> 

		<body> 
		
			<nav>Course 

			<ul> 

			<li><a  href="#">HTML5</a></li> 

			<li><a  href="#">CSS3</a></li> 

			<li><a  href="#">JavaScript</a></li> 

			<li><a  href="#">C#</a></li> 

			</ul> 

			</nav> 

	
		</body> 

		</html>
==================================================================

The rendered document shows how it's possible to design web pages with drop-down menus:


For more details, please contact me here.
Date of last modification: 2020